<template>
	<view class="container">
		<u-navbar :background="background" back-icon-color="#ffffff" height="50" :custom-back="back">
			<u-search placeholder="请输入想要搜索的商品名称" v-model="keyword" bg-color="#ffffff" @custom="searchHandle"
				@search="searchHandle"></u-search>
		</u-navbar>
		<!-- 搜索相关 -->
		<view style="padding: 30rpx;" v-show="show">
			<view v-show="historyList.length>0">
				<u-section title="搜索历史" font-size="30" line-color="#FF6801">
					<view slot="right">
						<u-icon name="trash-fill" size="36" color="#333" @click="trashAll"></u-icon>
					</view>
				</u-section>
				<view style="padding:30rpx 0">
					<u-tag class="u-m-r-20 u-m-10" :text="item" type="info" mode="light" shape="circle" size="mini"
						closeable v-for="(item,index) in historyList" :key="index" @close="trashOne(index)" @click="hotItemClick(item)"/>
				</view>
			</view>
			<view v-show="hotData.length>0">
				<view>
					<u-section title="热门搜索" font-size="30" :right="false" line-color="#FF6801"></u-section>
				</view>
				<view style="padding:30rpx 0">
					<u-tag class="u-m-r-20 u-m-10" :text="item.name" type="info" mode="light" shape="circle" size="mini" v-for="(item,index) in hotData" :key="index" @click="hotItemClick(item.name)"/>
				</view>
			</view>
		</view>
		<!-- 搜索相关 -->
		<!-- 搜索结果 -->
		<view v-show = '!show'>
			<view class="u-flex u-row-around u-p-t-20 u-p-b-20">
				<view class="u-flex" v-for="(item,index) in tabs" :key="index" @click="tabshandle(item,index)">
					<text class="u-p-r-10" :class="[active==index?'u-type-warning-dark':'']">{{item.name}}</text>
					<view class="u-flex-col" v-if="item.status">
						<u-icon name="arrow-up-fill" size="24" style="zoom: 0.7;"
							:color="item.sort_type==1?$u.color.warningDark:$u.color.defaultColor"></u-icon>
						<u-icon name="arrow-down-fill" size="24" style="zoom: 0.7;"
							:color="item.sort_type==2?$u.color.warningDark:$u.color.defaultColor"></u-icon>
					</view>
				</view>
			</view>
			<view class="product" :style="{'backgroundColor':backgroundColor}">
				<u-waterfall v-model="productList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-water" @click="toDetails(item)" v-for="(item, index) in leftList"
							:key="index">
							<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
							<u-lazy-load :image="item.mainImageUrl" threshold="50" border-radius="10"></u-lazy-load>
							<view class="demo-title">
								<u-tag v-if="item.text" class="u-m-r-10" :text="item.text" type="warning" mode="dark"
									size="mini" />
								{{item.productTitle}}
							</view>
							<view class="demo-shop">
								<text class="u-type-warning u-font-xl u-m-r-10">¥{{item.salePrice}}</text>
								<text class="" style="text-decoration: line-through;">¥{{item.productSalePrice}}</text>
							</view>
							<view class="u-flex u-row-between u-font-xs u-p-t-10">
								<text class="u-type-info">{{item.payNum}}人付款</text>
								<text class="u-type-warning">+{{item.productSalePrice}}贡献值</text>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-water" @click="toDetails(item)" v-for="(item, index) in rightList"
							:key="index">
							<u-lazy-load :image="item.mainImageUrl" threshold="50" border-radius="10"></u-lazy-load>
							<view class="demo-title">
								<u-tag v-if="item.text" class="u-m-r-10" :text="item.text" type="warning" mode="dark"
									size="mini" />
								{{item.productTitle}}
							</view>
							<view class="demo-shop">
								<text class="u-type-warning u-font-xl u-m-r-10">¥{{item.salePrice}}</text>
								<text class="" style="text-decoration: line-through;">¥{{item.productSalePrice}}</text>
							</view>
							<view class="u-flex u-row-between u-font-xs u-p-t-10">
								<text class="u-type-info">{{item.payNum}}人付款</text>
								<text class="u-type-warning">+{{item.productSalePrice}}贡献值</text>
							</view>
						</view>
					</template>
				</u-waterfall>
				<view class="u-p-30">
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(to right, #FF6801, #FF9832)'
				},
				keyword: '',
				show: true,
				
				historyList:[],
				hotData:[],

				productList: [],
				
				backgroundColor: {
					type: String,
					default: '#f2f2f2'
				},
				dataFrom: {
					query: '',
					query_type: '',
					page: 1,
					size: 10
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '暂无数据'
				},

				tabs: [{
					name: '综合',
					status: false,
					query_type: 1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type: 2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type: 3,
					sort_type: ''
				}],
				active: 0
			}
		},
		watch:{
			keyword(val){
				if(!val){
					this.show = true;
				}
			}
		},
		onLoad(option) {
			if (option.name) {
				this.keyword = option.name;
				this.dataFrom.query = option.name;
				this.show = false
			} else {
				this.show = true
			}
		},
		onReachBottom() {
			this.dataFrom.page++;
			this.productQuery();
		},
		mounted() {
			if(uni.getStorageSync('historyList')){
				this.historyList = uni.getStorageSync('historyList')
			}
			this.productQuery();
			this.getHotSearch()
		},
		methods: {
			//搜索
			searchHandle(value) {
				this.show = false;
				this.$refs.uWaterfall.clear();
				this.dataFrom.query= value;
				this.dataFrom.page = 1;
				this.productQuery();
			},
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
			getHotSearch(){
				this.$u.api.hotSearch().then(res => {
					if (res.code == 0) {
						this.hotData = res.data;
					}
				})
			},
			productQuery() {
				if(this.dataFrom.query){
					this.historyList.push(this.dataFrom.query);
					this.historyList = Array.from(new Set(this.historyList));
					uni.setStorageSync('historyList',this.historyList);
					this.$u.api.productQuery(this.dataFrom).then(res => {
						if (res.code == 0) {
							this.productList = [...this.productList, ...res.data];
							if (res.data.length<10) {
								this.status = 'nomore';
							}
						}
					})
				}
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/mallDetails/index?id=' + item.id
				})
			},
			tabshandle(item, index) {
				this.active = index;
				let sortType = this.tabs[index].sort_type;
				this.tabs = [{
					name: '综合',
					status: false,
					query_type: 1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type: 2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type: 3,
					sort_type: ''
				}]
				if (sortType == '' || sortType == 2) {
					this.tabs[index].sort_type = 1
				} else {
					this.tabs[index].sort_type = 2
				}

				if (this.productList.length > 0) {
					this.$refs.uWaterfall.clear()
				}

				this.dataFrom.page = 1;
				this.dataFrom.query_type = item.query_type;
				this.dataFrom.sort_type = this.tabs[index].sort_type;
				this.productQuery();
			},
			hotItemClick(item){
				this.keyword = item;
				this.dataFrom.query = item;
				this.tabs = [{
					name: '综合',
					status: false,
					query_type: 1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type: 2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type: 3,
					sort_type: ''
				}];
				this.show = false;
				this.$refs.uWaterfall.clear()
				this.active = 0;
				this.dataFrom.page = 1;
				this.productQuery();
			},
			trashAll(){
				try {
					this.historyList = [];
				    uni.removeStorageSync('historyList');
				} catch (e) {
				    // error
				}
			},
			trashOne(index){
				this.historyList.splice(index,1)
				uni.setStorageSync('historyList',this.historyList);
			}
		}
	}
</script>

<style scoped>
	.search {
		background: linear-gradient(to right, #FF6801, #FF9832);
	}

	.demo-water {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		position: relative;
		padding: 16rpx;
		box-shadow: 1px 1px 1px #f2f2f2;
	}

	.demo-title {
		box-sizing: border-box;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		color: #1a1a1a;
		margin-top: 10rpx;
		margin-bottom: 6rpx;
		padding: 0 8rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: #FF6801;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: #ccc;
		margin-top: 5px;
	}
</style>
